<template>
    <div>
        <div class="crumbs">
            <Breadcrumb separator="/">
                <BreadcrumbItem to="/resume"><Icon type="md-apps" /> 用户简历</BreadcrumbItem>
                <BreadcrumbItem>简历表单</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Row :gutter="20">
            <!-- 横排表单 -->
            <Form :inline="true" ref="form" :model="form" :label-width="80" :rules="rules">
                <Col :span="8">
                    <FormItem label="姓名" prop="real_name">
                        <Input v-model="form.real_name" placeholder="请输入姓名" style="width:150px;"></Input>
                    </FormItem>
                    <FormItem label="邮箱" prop="email">
                        <Input v-model="form.email"></Input>
                    </FormItem>
                    <FormItem label="职位" prop="job">
                        <Select v-model="form.job" placeholder="请选择" style="width:150px;">
                            <Option :key="item" v-for="item in job_items" :label="item" :value="item"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label="性别">
                        <RadioGroup v-model="form.gender" type="button">
                            <Radio :label="1">男</Radio>
                            <Radio :label="0">女</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="上传简历">
                        <Upload style="width:150px;"
                            :action="uploadApi"
                            :default-file-list="form.attend"
                            :headers="headers"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            :on-exceed="handleExceed"
                            :on-success="onSuccess"
                            >
                            <Button icon="ios-cloud-upload-outline">上传</Button>
                        </Upload>
                    </FormItem>
                    <FormItem label="手机" prop="phone">
                        <Input v-model="form.phone" style="width:150px;"></Input>
                    </FormItem>
                    <FormItem label="微信" prop="qqwechat">
                        <Input v-model="form.phone"></Input>
                    </FormItem>
                    <FormItem label="学历" prop="education">
                        <Select v-model="form.education" placeholder="请选择" style="width:150px;">
                            <Option value="本科">本科</Option>
                            <Option value="硕士">硕士</Option>
                            <Option value="博士">博士</Option>
                            <Option value="博士后">博士后</Option>
                            <Option value="大专以上">大专以上</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="是否已婚">
                        <RadioGroup v-model="form.is_married" type="button">
                            <Radio :label="1">已婚</Radio>
                            <Radio :label="0">未婚</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>

                <div style="clear:both;"></div>
                <Col :span="24">
                    <Card>
                        <p slot="title">
                            <Icon type="md-apps"></Icon>
                            项目经历
                        </p>
                        <a href="#" slot="extra" @click.prevent="projectAdd">
                            <Icon type="md-add"></Icon>
                            添加
                        </a>
                        <div v-for="(item, k) in form.project" class="text item"  :key="k">
                            <FormItem>
                                <Input size="small" v-model="item.project" placeholder="项目"></Input>
                            </FormItem>
                            <FormItem>
                                <DatePicker type="date" :value="item.start" @on-change="v=>{item.start = v}" placeholder="入职时间"></DatePicker>
                            </FormItem>
                            <FormItem>
                                <DatePicker type="date" :value="item.end" @on-change="v=>{item.end = v}" placeholder="离职时间"></DatePicker>
                            </FormItem>
                            <FormItem>
                                <Button icon="md-trash" type="error" @click="projectDelete(k)">删除</Button>
                            </FormItem>
                        </div>
                    </Card>
                </Col>

                <div style="clear:both;"></div>
                <Col :span="24" style="margin-top:20px;">
                    <Card>
                        <p slot="title">
                            <Icon type="md-apps"></Icon>
                            教育经历
                        </p>
                        <a href="#" slot="extra" @click.prevent="schoolAdd">
                            <Icon type="md-add"></Icon>
                            添加
                        </a>
                        <div v-for="(item, k) in form.school" class="text item"  :key="k">
                            <FormItem>
                                <Input size="small" v-model="item.school" placeholder="学校"></Input>
                            </FormItem>
                            <FormItem>
                                <Input size="small" v-model="item.education" placeholder="学历"></Input>
                            </FormItem>
                            <FormItem>
                                <Input size="small" v-model="item.major" placeholder="专业"></Input>
                            </FormItem>
                            <FormItem>
                                <DatePicker type="date" :value="item.start" @on-change="v=>{item.start = v}" placeholder="入职时间"></DatePicker>
                            </FormItem>
                            <FormItem>
                                <DatePicker type="date" :value="item.end" @on-change="v=>{item.end = v}" placeholder="离职时间"></DatePicker>
                            </FormItem>
                            <FormItem>
                                <Button icon="md-trash" type="error" @click="schoolDelete(k)">删除</Button>
                            </FormItem>
                        </div>
                    </Card>
                </Col>
                
                <div style="clear:both;"></div>
                <div style="position: fixed; right:20px;top:100px;">
                    <FormItem>
                        <Button icon="md-checkmark" type="primary" @click="save">提交</Button>
                        <Button icon="md-arrow-back" @click="back">取消</Button>
                    </FormItem>
                </div>
            </Form>
            <!-- 横排表单end -->
        </Row>

    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                url: pub.apiDomain + '/resume',
                form: {
                    gender: 1,
                    is_married: 0,
                    school: [],
                    project: [],
                    attend: [], //简历列表
                    birthday: '1990-06-01',
                },
                job_items:[],
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    real_name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' },
                        { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                    ],
                    job:[{ required: true, message: '请选择职位', trigger: 'change' }],
                    education:[{ required: true, message: '请选择学历', trigger: 'change' }],
                    birthday:[{ required: true, message: '请输入出生年月', trigger: 'change' }],
                    email:[{ required: true, message: '请输入邮箱', trigger: 'blur' },{type: 'email', message: '不是有效的邮箱', trigger: 'blur' }],
                    phone:[{ validator: pub.checkPhone, required: true, trigger: 'blur'}],
                },
                uploadApi: pub.apiDomain + 'index/upload',
                headers: {'Authorization': pub.token()},
            }
        },
        created(){
            this.getData();
        },
        methods: {
            //加载数据
            getData() {
                let id = this.$route.params.id;
                //同时加载职位列表、表单数据
                let api = [this.$axios.get(this.url + '/job')];
                if(id > 0) {
                    api.push(this.$axios.get(this.url + '/get/id/'+id));
                }
                this.$axios.all(api)
                .then(this.$axios.spread((res1, res2) => {
                    this.job_items = res1.d;
                    if(res2) {
                        this.form = res2.d;
                    }
                }));
            },
            schoolAdd(){
                this.form.school.push({});
            },
            schoolDelete(index){
                this.form.school.splice(index, 1);
            },
            projectAdd(){
                this.form.project.push({});
            },
            projectDelete(index){
                this.form.project.splice(index, 1);
            },
            back(){
                this.$router.back();
            },
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('提交成功！');
                            this.$router.back();
                        })
                    } else {
                        return false;
                    }
                });
            },
            //文件上传
            handleRemove(file, fileList) {
                this.form.attend.forEach((f, i) => {
                    if(f.name == file.name) {
                        this.form.attend.splice(i, 1);
                    }
                });
            },
            handlePreview(file) {
                alert('预览文件'+file.url);
            },
            handleExceed(files, fileList) {
                this.$Message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            onSuccess(res, file, fileList) {
                this.form.attend.push({name: file.name, url:res.m});
            },
        }
    }
</script>